<template>
	<div class="shopcar_container">
		<!-- 商品列表区域 -->
		<div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
					<img :src="item.img_url" alt="" />
					<div class="info">
						<h1>{{ item.title }}</h1>
						<p>
							<span class="price">￥{{ item.price }}</span>
							<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
							<a href="#" @click.prevent="remove(item.id, i)">删除</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 商品结算区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner buju">
					<div class="left">
						<p>总计(不含运费)</p>
						<p>
							已勾选商品
							<span class="red">{{ $store.getters.getGoodsCountAndAmount.count }}</span>
							件, 总价
							<span class="red">{{ $store.getters.getGoodsCountAndAmount.amount }}</span>
							元
						</p>
					</div>
					<mt-button type="danger" size="normal" @click="jiesuan">去结算</mt-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import numbox from '../subcomponent/shopcar_numbox.vue';
import { Toast } from 'mint-ui';
export default {
	data() {
		return {
			goodslist: [] //购物车所有商品的数据
		};
	},
	created() {
		this.goodslist = JSON.parse(localStorage.getItem('car') || '[]');
	},
	methods: {
		remove(item, index) {
			// 点击删除，把商品从 store 中根据传递的id删除，同时把当前组件中的 goodslist 中，对应要删除的那个商品，使用index来删除
			this.goodslist.splice(index, 1);
			console.log(item)
			this.$store.commit('removeFromCar', item);
		},
		selectedChanged(id, val) {
			// 每当点击开关，把最新的状态，同步到store中
			console.log(id + '---' + val);
			this.$store.commit('updateGoodsSelected', { id, selected: val });
		},
		jiesuan() {
			var arr=[]
			this.$store.state.car.forEach(item => {
				if (item.selected) {
					arr.push(item.id)
					Toast('结算成功');
				}
			});
			this.$store.commit('removeSelected', arr);
			this.$router.go(0)
		}
	},
	components: {
		numbox
	}
};
</script>

<style lang="scss" scoped>
.shopcar_container {
	background-color: #eee;
	overflow: hidden;
	.mui-card-content-inner {
		display: flex;
		align-items: center;
	}
	.buju {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.red {
			color: red;
			font-size: 1rem;
			font-weight: bold;
		}
	}
	img {
		width: 3.75rem;
		height: 3.75rem;
	}
	h1 {
		font-size: 0.8125rem;
	}
	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.price {
			color: red;
			font-weight: bold;
		}
	}
}
</style>
